<template>
  <div id="ThreeContainer" ref="ThreeContainer" />
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let router = useRouter();
let three = {
  renderer: null,
  camera: null,
  scene: null,
  controls: null
};

const initCT = () => {
  // 初始化three场景
  let ThreeContainer = document.getElementById("ThreeContainer");
  let fov = 45;
  let width = window.innerWidth;
  let height = window.innerHeight;
  let aspect = width / height;
  let near = 1;
  let far = 10 * 1000 * 1000;
  three.scene = new THREE.Scene();
  three.camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //透视相机
  three.camera.position.y = 3;
  three.camera.position.z = 10;
  three.renderer = new THREE.WebGLRenderer({
    antialias: true, //抗锯齿
    alpha: true, //透明度
    preserveDrawingBuffer: true, //保存绘图缓冲
    logarithmicDepthBuffer: true
  });
  three.renderer.setSize(window.innerWidth, window.innerHeight);
  three.renderer.shadowMap.enabled = true;

  three.controls = new OrbitControls(three.camera, three.renderer.domElement);
  // // 自动旋转 整体
  // controls.autoRotate = true;
  // controls.autoRotateSpeed = 0.5;
  // // 对轨道控制器改变时 监听
  // controls.addEventListener("change", () => {
  //   // renderer.render(scene, camera);
  // })

  // 环境光
  const light = new THREE.AmbientLight(0xffffff, 1);
  three.scene.add(light);
  // // 创建地面
  // const meshfloor = new THREE.Mesh(
  //   new THREE.PlaneGeometry(100, 100),
  //   new THREE.MeshPhongMaterial({
  //     color: 0x1b5e20,
  //   })
  // )
  // meshfloor.rotation.x -= Math.PI / 2
  // // 地面接受光源
  // meshfloor.receiveShadow = true
  // three.scene.add(meshfloor)

  ThreeContainer.appendChild(three.renderer.domElement);

  window.three = three;

  window.addEventListener("click", onMouseClick, false);
};

const onMouseClick = event => {
  // 创建射线投射器
  const raycaster = new THREE.Raycaster();
  // 鼠标位置
  const mouse = new THREE.Vector2();
  // 将鼠标坐标归一化
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // 设置射线起点为鼠标位置，射线的方向为相机视角方向
  raycaster.setFromCamera(mouse, three.camera);
  // 计算射线相交
  const intersects = raycaster.intersectObjects(three.scene.children, true);
  if (!intersects.length) return;

  // 点击到模型时的处理
  const selectedObject = intersects[0].object || {};
  // console.log("selectedObject:", selectedObject);
  // 检查点击的对象是否为模型
  if (!selectedObject.name) return;
  if (selectedObject.name.includes("Obj3d66-555102-32-60")) {
    router.push("/peidianshi");
  }
  if (selectedObject.name.includes("Material")) {
    router.push("/peidiangui");
  }
};

onMounted(() => {
  initCT();
  window.addEventListener("resize", () => {
    // 更新摄像头
    three.camera.aspect = window.innerWidth / window.innerHeight;
    //   更新摄像机的投影矩阵
    three.camera.updateProjectionMatrix();
    //   更新渲染器
    three.renderer.setSize(window.innerWidth, window.innerHeight);
    //   设置渲染器的像素比
    three.renderer.setPixelRatio(window.devicePixelRatio);
  });
});
</script>

<style lang="scss" scoped>
#ThreeContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  // background-color: #fff;
  overflow: hidden;

  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
